<template>
	<view>
		<view class="content">
			<view class="content-t">
				<view class="content-t-text">
					<view class="titles">{{reportName}}</view>
					<text class="text">￥{{price}}</text>
				</view>
				<view class="content-t-text-smtit">
					{{describes}}
				</view>
				<view class="ckgd" @click="ckgd()">
					查看更多<image src="../../static/ckgdh.png" mode=""></image>
				</view>
			</view>

			<view class="content-t-c">
				<view class="content-t-text">
					<view class="titles">预留信息</view>
				</view>

				<view class="content-t-c-c">
					<view class="content-t-c-c-list">
						<view class="content-t-c-c-list-l">
							VIN
						</view>
						<view class="content-t-c-c-list-r">
							<input v-model="vin" placeholder='请输入被检测车辆的车架号'
								placeholder-style="font-size:28rpx;color:#ddd;" />
							<image src="../../static/xiangji.png" mode="" @click="piction"></image>
						</view>
					</view>
					<view class="content-t-c-c-list" @click="clickCar">
						<view class="content-t-c-c-list-l">
							品牌车系
						</view>
						<view class="content-t-c-c-list-r">
							<input v-model="carModel" :disabled="true" placeholder='请选择被检测车辆品牌车系'
								placeholder-style="font-size:28rpx;color:#ddd;" />
							<image src="../../static/lbgd.png" mode=""
								style="width: 11.4rpx;height: 20rpx;margin-right: 10rpx;"></image>
						</view>
					</view>
					<view class="content-t-c-c-list">
						<view class="content-t-c-c-list-l">
							联系人
						</view>
						<view class="content-t-c-c-list-r">
							<input v-model="contacts" placeholder='请输入您的姓名'
								placeholder-style="font-size:28rpx;color:#ddd;" />
							<image src="../../static/lbgd.png" mode=""
								style="width: 11.4rpx;height: 20rpx;margin-right: 10rpx;opacity: 0;"></image>
						</view>
					</view>
					<view class="content-t-c-c-list">
						<view class="content-t-c-c-list-l">
							联系电话
						</view>
						<view class="content-t-c-c-list-r">
							<input v-model="contactPhone" maxlength='11' placeholder='请输入您的联系方式' type="number"
								placeholder-style="font-size:28rpx;color:#ddd;" />
							<image src="../../static/lbgd.png" mode=""
								style="width: 11.4rpx;height: 20rpx;margin-right: 10rpx;opacity: 0;"></image>
						</view>
					</view>
				</view>
			</view>

			<view class="content-t-c">
				<view class="content-t-text">
					<view class="titles">到店检测</view>
					<view class="navbar-address" @click="queryCity">
						<view class="navbar-address-text">{{city}}
							<image src="../../static/lbgd.png" mode=""
								style="width: 11.4rpx;height: 20rpx;margin-right: 10rpx;"></image>
						</view>
						<!-- <u-icon style="margin-left: 5rpx;margin-top: 15rpx;" size="20" name="arrow-down"></u-icon> -->
					</view>
				</view>
				<view class="radio">
					<u-radio-group v-model="traderId" @change="radioGroupChange">
						<u-radio @change="radioChange" v-for="(item, index) in businessList" :key="index" :name="item.traderId"
							 active-color='#002B56' wrap='true'>
							<view class="namse">{{item.storeAddress}}</view>
						</u-radio>
					</u-radio-group>
				</view>
				<view class="listDetailsAdd" v-if="isAppointment==1" >
					<view class="listData">
						<view class="listDataTitles" :id="act==item.monthDay?'act':''" v-for="(item,index) in listData"
							@click="delTime(item,index)" :key='index'>
							<view>{{item.week}}</view>
							<view>{{item.monthDay}}</view>
						</view>
					</view>
					<view class="xian">
						<view class="listDataTitles" :id="act==item.monthDay?'act':''" v-for="(item,index) in listData" :key='index'>
						</view>
					</view>
					<view class="listData1">
						<view class="listData1L" @click="addData('am',listData[actIndex].amNum)" :id="amPm=='am'?'act':''">
							<view class="listData1LT">上午 09:00-12:00</view>
							<view class="listData1LB">剩余{{listData[actIndex].amNum}}位</view>
						</view>
						<view class="listData1L" @click="addData('pm',listData[actIndex].pmNum)" :id="amPm=='pm'?'act':''">
							<view class="listData1LT">下午 01:00-05:00</view>
							<view class="listData1LB">剩余剩余{{listData[actIndex].pmNum}}位</view>
						</view>
					</view>
				</view>



				<view class="content-t-bottom">
					请于约定时间前到达检测中心，具体以工作人员沟通为准。
				</view>
			</view>

			<view class="content-t-b">
				工作时间：09:00-17:00
			</view>
			<view class="content-t-cc" style="padding-top: 32rpx;">
				<u-checkbox-group @change="checkboxGroupChange">
					<u-checkbox active-color="#002B56" shape="circle" @change="checkboxChange" v-model="item.checked"
						v-for="(item, index) in list1" :key="index" :name="item.name">
						<view class="namse1">使用本服务意味着您已经阅读并同意<span @click="dzht()" class="dzht">《检测服务电子合同》</span>
							<span class="dzht" @click='dzht1()'>《豪车检测服务电子合同》</span>
						</view>
					</u-checkbox>
				</u-checkbox-group>
			</view>
			<view class="bottoms">
				<view class="je">
					<view class="yfk">应付款</view>
					<view class="yfk je1">￥{{price}}</view>
				</view>
				<view class="ljxd" @click="ljxd">
					立即下单
				</view>
			</view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	import app from "../../App.vue"
	import API from "@/api/report.js"
	export default {
		data() {
			return {
				list1: [{
					name: 'apple',
					checked: false,
					disabled: false
				}],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '1',
		
				city: '',
				cityId:'',
				carModel: '',
				
				vin: '',
				price:'',
				reportName:'',
				describes:'',
				//获取当前商家信息
				businessList:'',
				//当前时间
				listData: [],
				//当前时间段的人
				numPeople:[],
				// 默认选择的时间段
				act: '',
				actIndex:'0',
				//选择上午或者下午
				amPm:'',
				// 时间段人数
				actList:'',
				//是否需要预约
				isAppointment:0,
				//联系人
				contacts:'',
				//联系电话
				contactPhone:'',
				//车辆检测id
				detectionReportId:'',
				//车商id
				traderId:'',
				//车系id
				seriesId:'',
				//地址
				detectionAddress:'',
			};
		},
		onLoad(option) {
			this.price = option.price;
			this.reportName = option.reportName;
			this.describes = option.describes;
			this.detectionReportId = option.detectionReportId;
			this.setData();
		},
		onShow() {
			this.city = getApp().globalData.cityName;
			this.cityId = getApp().globalData.cityId;
			const json = getApp().globalData.dgxzcx
			this.carModel = json.seriesName;
			this.seriesId = json.seriesId;
			console.log(json)
			this.storeAddressList();
		},
		methods: {
			//立即下单
			ljxd(){
				let that = this;
				if(!this.list1[0].checked){
					that.$refs.uToast.show({
						title: '请先同意并阅读合同',
						type:'error'
					})
					return false
				}
				
				var appointmentTime1=''
				if(this.isAppointment==1){
					if(that.amPm==''){
						that.$refs.uToast.show({
							title: '时间段为必选项',
							type:'error'
						})
						return false
					}else{
						var date = new Date();
						appointmentTime1 =date.getFullYear()+'-'+that.act+'/'+that.amPm ;
					}
					
				}
				
				var data = {
					detectionReportId:this.detectionReportId,
					type:1,
					contacts:this.contacts,
					contactPhone:this.contactPhone,
					traderId:this.traderId,
					vin:this.vin,
					orderSeriesId:this.seriesId,
					appointmentTime:appointmentTime1,
					detectionAddress:this.detectionAddress
				}
				
				if(data.vin==''||data.contactPhone==''||data.orderSeriesId==''||data.contacts==''){
					this.$refs.uToast.show({
						title: 'vin，车系，联系人，联系人号码都为必填项',
						type:'error'
					})
				}else{
					// console.log(data)
					API.placeOrder(data).then(res => {
						console.log(res)
						debugger
						if(res.code == 200){
							let mydata = {
								detectionOrderId:res.data.detectionOrderId
							}
							API.detectionOrderCreateOrder(data).then(res => {
								that.$refs.uToast.show({
									title: '下单成功',
									type:'success',
									callback:function(){
										uni.redirectTo({
										      url: '/pagesB/allOrders/allOrders'
										});
									}
								})
							})
							
							
						}
						
					})
				}
			},
			//选择时间段
			addData(mydate,num){
				let that = this;
				if(num==0){
					this.$refs.uToast.show({
						title: '当前时间已约满',
						type:'error'
					})
					return false
				}else{
					var date = new Date();
					var newdata = Number(date .getMonth())+1+'-'+ date .getDate();
					if(this.act == newdata&&mydate=='am'){
						if(date.getHours()>=12){
							that.$refs.uToast.show({
								title: '当前时间断不可约',
								type:'error'
							})
							return false
						}else{
							that.amPm = mydate
						}
					}else if(this.act == newdata&&mydate=='pm'){
						if(date.getHours()>=17){
							that.$refs.uToast.show({
								title: '当前时间断不可约',
								type:'error'
							})
							return false
						}else{
							that.amPm = mydate
						}
					}else if(mydate=='am'){
						that.amPm = mydate
					}else{
						that.amPm = mydate
					}
				}
				
				// if(data =='am'){
					
				// }
			},
			//获取当前车商地址
			storeAddressList(){
				API.storeAddressList({cityId: this.cityId}).then(res => {
					console.log(res)
					if(res.data.length!=0){
						this.traderId = res.data[0].traderId;
						if(res.data[0].isAppointment==1){
							this.listData = res.data[0].appointmentTimes;
							this.act = res.data[0].appointmentTimes[0].monthDay;
							this.isAppointment = res.data[0].isAppointment;
							this.traderId = res.data[0].traderId;
						}else{
							this.isAppointment = 0;
						}
						
						this.businessList = res.data;
						this.detectionAddress = this.businessList[0].storeAddress
					}else{
						this.businessList = [];
						this.isAppointment = 0;
					}
						
				})
			},
			piction() {
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: getApp().globalData.pictureUpload, //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								var data = JSON.parse(uploadFileRes.data)
								console.log(data);
								let img = {
									image: data.data.fileId,
								}
								API.getOcrInfo(img).then(res => {
									console.log(res);
									if (res.code == 200) {
										that.vin = res.data.vin
									} else {
										that.$u.toast('获取VIN码失败');
									}
								})

							}
						});

					}
				});
			},
			dzht() {
				uni.navigateTo({
					url: '/pagesB/jcfwdzht/jcfwdzht'
				})
			},
			dzht1() {
				uni.navigateTo({
					url: '/pagesB/hcjcfwdzht/hcjcfwdzht'
				})
			},

			clickCar() {
				app.globalData.xzType = false
				uni.navigateTo({
					url: "/pagesB/selectCar/carModel"
				})
			},
			queryCity() {
				uni.navigateTo({
					url: '/pagesB/city/city'
				})
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				//console.log(e);
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				// console.log(e);
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				var index = this.businessList.map(del=>del.traderId).indexOf(e)
				this.listData = this.businessList[index].appointmentTimes;
				this.act = this.businessList[0].appointmentTimes[0].monthDay;
				this.isAppointment =  this.businessList[index].isAppointment;
				this.amPm = ''
				this.traderId = this.businessList[index].traderId;
				this.detectionAddress = this.businessList[index].storeAddress
			},
			delTime(item, index) {
				let that = this;
				if(this.actIndex==index){
					return false
				}else{
					that.act = item.monthDay;
					that.actIndex = index;
					that.amPm = '';
				}
				
				
				console.log(this.amPm)
			},
			setData() {
				
			},
			ckgd() {
				uni.navigateTo({
					url: '/pagesB/carService/carService?detectionReportId=' + this.detectionReportId
				});
			}
		}
	}
</script>

<style lang="scss">
	.navbar-address-text {
		min-width: 120rpx;
		display: flex;
		justify-content: space-between;

		image {
			margin-top: 45rpx;
		}
	}

	.listDetailsAdd {
		display: flex;
	}

	#act {
		background: #002B56;
		color: #fff !important;
		view{
			color: #fff !important;
		}
	}

	.xian {
		height: 416rpx;
		width: 2rpx;
		background: #F6F6F6;
		margin-left: 32rpx;
		margin-top: 24rpx;
		position: relative;

		view {
			width: 20rpx;
			height: 20rpx;
			position: absolute;
			background: #F6F6F6;
			border-radius: 50%;
		}
	}

	.xian view:nth-child(1) {
		top: 40rpx;
		left: -9rpx;
	}

	.xian view:nth-child(2) {
		top: 140rpx;
		left: -9rpx;
	}

	.xian view:nth-child(3) {
		top: 240rpx;
		left: -9rpx;
	}

	.xian view:nth-child(4) {
		top: 340rpx;
		left: -9rpx;
	}

	input {
		width: 400rpx;
		height: 88rpx;
		line-height: 88rpx;
	}

	.content-t-bottom {
		font-size: 24rpx;
		color: #FD7E6E;
		background: #FFF2F1;
		margin-top: 32rpx;
		padding: 12rpx;
	}

	.content-t-text {
		display: flex;
		justify-content: space-between;
		height: 114rpx;
		line-height: 114rpx;
		border-bottom: 1px solid #EFEFEF;
	}

	.titles {
		font-size: 36rpx;
		color: #2C2C2C;
	}

	.text {
		font-size: 36rpx;
		color: #FF552E;
	}

	.content {
		.content-t {
			padding: 0 32rpx;
			// width: 750rpx;
			height: 275rpx;
			background: #fff;

			.content-t-text-smtit {
				font-size: 24rpx;
				color: #333333;
				margin-top: 32rpx;
			}

			.ckgd {
				font-size: 24rpx;
				color: #999999;
				text-align: right;
				margin-top: 32rpx;

				image {
					width: 8rpx;
					height: 12rpx;
					margin-left: 10rpx;
				}
			}
		}

		.content-t-cc {
			padding: 0 32rpx 32rpx;
			// width: 750rpx;

			.namse {
				font-size: 24rpx;
				color: #999999;
			

			}
		}

		.namse1 {
			// display: flex;
			// flex-wrap: wrap;
			// width: 750rpx;
			font-size: 24rpx;
			color: #999999;
		}

		.content-t-c {
			margin-top: 7rpx;
			padding: 0 32rpx 32rpx;
			// width: 750rpx;
			background: #fff;

			// height: 275rpx;
			.content-t-center {
				display: flex;
				justify-content: space-between;

				view {
					width: 214rpx;
					height: 122rpx;
					border: 2rpx solid #002B56;

					text {
						font-size: 30rpx;
						color: #2C2C2C;
						text-align: center;
						display: block;
						margin-top: 16rpx;
					}

					.money {
						margin-top: 6rpx;
						color: #FF552E;
					}
				}
			}


		}

		.content-t-c-c-list {
			height: 88rpx;
			line-height: 88rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #efefef;

			.content-t-c-c-list-l {
				width: 121rpx;
				font-size: 28rpx;
				color: #2C2C2C;
			}

			.content-t-c-c-list-r {
				display: flex;
			}

			image {
				width: 27rpx;
				height: 24.5rpx;
				margin-top: 30rpx;
				margin-left: 24rpx;
			}
		}

		.namse {
			font-size: 26rpx;
			color: #2C2C2C;
			height: 80rpx;
			line-height: 80rpx;
		}

		.radio {
			margin-top: 24rpx;
		}
	}

	.listData {
		width: 212rpx;
		margin-top: 24rpx;
		border-radius: 8rpx;
		background: #f6f6f6;
		overflow: hidden;

		.listDataTitles {
			width: 212rpx;
			height: 104rpx;
			padding-top: 20rpx;
			font-size: 27rpx;
			color: #2C2C2C;
			text-align: center;
		}
	}

	.listData1 {
		margin-left: 46rpx;

		.listData1L {
			width: 376rpx;
			height: 192rpx;
			background: #F6F6F6;
			border-radius: 8rpx;
			text-align: center;

			.listData1LT {
				font-size: 28rpx;
				color: #2C2C2C;
				margin-top: 28rpx;
				padding-top: 50rpx;
			}
		}
	}

	.content-t-b {
		font-size: 24rpx;
		color: #999999;
		text-align: center;
		height: 89rpx;
		line-height: 89rpx;
		background: #fff;
	}

	.bottoms {
		height: 126rpx;
		background: #fff;
		padding: 0 32rpx;
		display: flex;
		justify-content: space-between;
	}

	.je {
		width: 320rpx;
		display: flex;

	}

	.yfk {
		padding-top: 36rpx;
	}

	.je1 {
		font-size: 48rpx !important;
		color: #FF552E !important;
		margin-left: 15rpx;
		padding-top: 20rpx !important;
	}

	.yfk {
		font-size: 30rpx;
		color: #2C2C2C;
		text-align: center;
	}

	.ljxd {
		width: 331rpx;
		height: 98rpx;
		background: #002B56;
		text-align: center;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 98rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
	}

	.dzht {
		color: #FD7E6E;
	}
</style>
